<template>
	<view class="cu-form-group item" :class="noBorder ? 'noBorder' : ''">
		<view class="title">{{ title }}</view>
		<view class="box">
			<input placeholder-class="placeholder" class="inp" v-show="!choice" :disabled="disabled" :placeholder="'请输入' + title" :name="name" :value="value" @input="input" />
			<picker v-if="choice"  @change="bindPickerChange" range-key="remark" :value="index" :range="choiceArr">
				<view class="choice">
					<view class="inp" :class="choiceArr[index] ? '' : 'placeholder'">{{ choiceArr[index] ? choiceArr[index].remark : '请选择' + title }}</view>
					<image class="cuIcon-right" src="/static/images/go.png" mode=""></image>
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'formItem',
		model: {
			prop: 'value',
			event: 'updateValue',
		},
		props: {
			title: '',
			name: '',
			disabled: {
				type: Boolean,
				default: false,
			},
			value: {
				type: [String, Number],
				default: '',
			},
			choice: {
				type: Boolean,
				default: false,
			},
			choiceArr: {
				type: Array,
				default: () => [],
			},
			noBorder: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				index: null,
			};
		},
		methods: {
			input(e) {
				this.$emit('updateValue', e.detail.value);
			},
			bindPickerChange(e) {
				this.index = e.detail.value;
				console.log(this.choiceArr[e.detail.value].bid)
				this.$emit('updateValue', this.choiceArr[e.detail.value].bid);
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	.item {
		width: 638rpx;
		margin: 0 auto;
		border-bottom: 1rpx solid #dddddd;
		.title {
			font-size: $uni-font-size-12;
			margin: 30rpx 0 20rpx;
		}
		.box {
			overflow: hidden;
			.inp {
				font-size: $uni-font-size-17;
				width: 100%;
				margin-bottom: 30rpx;
				padding: 0;
			}
			.choice {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.cuIcon-right {
					width: 8rpx;
					height: 15rpx;
					float: right;
				}
			}
			.placeholder {
				color: #999999;
			}
		}
	}
	.noBorder {
		border: none;
	}
</style>
